@charset "utf-8";
$fontsize:40;
@function rem($px) {
    @return $px/$fontsize * 1rem;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
    header {
        width: 100%;
        height: rem(130);
        background: white;
        position: absolute;
        top: 0;
        .back {
            width: rem(123);
            height: rem(57);
            float: left;
            margin-left: rem(23);
            margin-top: rem(40);
            input[type="button"] {
                width: 100%;
                height: 100%;
                font-size: rem(26);
                border: rem(2) solid #FF9344;
                border-radius: rem(17);
                background: #FFFFFF;
            }
        }
        .title {
            width: rem(106);
            height: rem(27);
            font-size: rem(26);
            margin: 0 auto;
            margin-top: rem(65);
        }
        .selectBar {
            width: rem(158);
            height: rem(54);
            border: rem(2) solid #FF9344;
            line-height: rem(14);
            box-sizing: border-box;
            float: right;
            margin-right: rem(22);
            margin-top: rem(48);
            background: url(../img/sanjiao.png) no-repeat right 5px center;
            background-size: rem(30) rem(16);
            select {
                width: 100%;
                height: 100%;
                text-indent: rem(14);
                font-size: rem(26);
                background: transparent;
                border: none;
                appearance: none;
                -webkit-appearance: none;
                outline: none;
            }
        }
    }
}

section {
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: rem(105);
    bottom: rem(68);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.searchbar {
    width: rem(264);
    height: rem(50);
    border: rem(2) solid #ff9344;
    border-radius: rem(50);
    padding: 0 rem(14);
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: rem(34);
    input[type="search"] {
        width: rem(190);
        height: 100%;
        border: none;
        font-size: rem(24);
        vertical-align: top;
        border-radius: rem(6);
    }
    i {
        font-size: rem(28);
        color: #FF9344;
        vertical-align: text-top;
        line-height: rem(50);
    }
}

.all {
    text-align: center;
    margin-top: rem(30);
    table {
        background: #dcdcdc;
        margin: 0 auto;
        margin-top: rem(16);
        tr {
            td {
                width: rem(124);
                height: rem(63);
                font-size: rem(20);
                border: rem(4) solid #ffffff;
                line-height: rem(63);
                text-align: center;
                a {
                    color: #898989;
                }
            }
        }
    }
}

.search-title {
    width: rem(709);
    margin: 0 auto;
    .title-left {
        float: left;
        font-size: rem(30);
        .title-img {
            width: rem(32);
            height: rem(45);
            float: left;
            padding: 0 rem(7);
            img {
                width: 100%;
                height: 100%;
            }
        }
        span {
            line-height: rem(44);
            float: left;
        }
    }
    .title-right {
        float: right;
        font-size: rem(24);
        margin-right: rem(23);
        line-height: rem(44);
        p {
            color: #000;
        }
        i {
            font-size: rem(24);
            color: #FF9344;
        }
    }
}


.hot-search{
    margin-top: rem(37);
    .hot-search-img{
        margin: 0 auto;
        width: rem(709);
        height: rem(352);
        margin-top: rem(32);
        .img-left{
            width: rem(280);
            height: rem(352);
            float: left;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .img-right{
            width: rem(420);
            height: rem(352);
            float: right;
            .img-right-top{
                width: rem(420);
                height: rem(146);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .img-right-bottom{
                padding-top: rem(8);
                .img-right-bottom1{
                    width: rem(195);
                    height: rem(196);
                    float: left;
                    padding-right: rem(11);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .img-right-bottom2{
                    width: rem(213);
                    height: rem(196);
                    float: left;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}

.recommend-search{
    margin-top: rem(49);
    .search-title{
        .title-left{
            .title-img{
                width: rem(41);
                height: rem(40);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .recommend-search-img{
        width: rem(709);
        margin: 0 auto;
        margin-top: rem(49);
        .recommend-1{
            width: rem(219);
            height: rem(200);
            float: left;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .recommend-3{
            width: rem(219);
            height: rem(200);
            float: right;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .recommend-2{
            width: rem(219);
            height: rem(200);
            margin: 0 auto;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}

footer {
    width: 100%;
    height: 68px;
    background: white;
    position: absolute;
    bottom: 0;
    a {
        color: #000000;
    }
    ul li {
        width: 25%;
        height: 100%;
        float: left;
        text-align: center;
        padding-top: rem(16);
        box-sizing: border-box;
        i {
            color: transparent;
            -webkit-text-stroke: rem(2) #FF9344;
        }
        .iconfont{
            font-size: rem(60);
        }
        &.active .iconfont{
            color: #FF9344;
        }
        p {
            font-size: 13px;
        }
        &:hover .iconfont {
            color: #FF9344;
        }
    }
}